---
title: Tina CMS 与 Astro
description: 使用 Tina 作为 CMS 并为你的 Astro 项目添加内容
sidebar:
  label: Tina CMS
type: cms
stub: false
logo: tina-cms
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Grid from '~/components/FluidGrid.astro';
import Card from '~/components/ShowcaseCard.astro';
import { Steps } from '@astrojs/starlight/components';

[Tina CMS](https://tina.io/) 是一个基于 Git 的无头（headless）内容管理系统（CMS）。

## 与 Astro 的集成

在开始前，你需要有一个 Astro 项目。然后：

<Steps>
1. 运行以下命令将 Tina 安装到你的 Astro 项目中。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx @tinacms/cli@latest init
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm dlx @tinacms/cli@latest init
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn dlx @tinacms/cli@latest init
      ```
      </Fragment>
    </PackageManagerTabs>

    - 当被要求提供 Cloud ID 时，按下 <kbd>Enter</kbd> 键跳过。如果你想使用 Tina Cloud，稍后可以生成一个 Cloud ID；
    - 当被询问「你使用的是哪个框架」时，选择 **Other**；
    - 当被问到公共资产存储在哪里时，按下 <kbd>Enter</kbd> 键。

    等待完成后，你现在应该在项目的根目录下有一个名为 `.tina` 的文件夹和在 `content/posts` 中生成的 `hello-world.md` 文件。
 
2. 修改 `package.json` 中的 `dev` 脚本：

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
    </PackageManagerTabs>

3. Tina CMS 现在以本地模式设置完成。你可以通过运行 `dev` 脚本，然后导航到 `/admin/index.html#/collections/post` 来进行测试。

    编辑《Hello, World!》文章将会更新项目目录中的 `content/posts/hello-world.md` 文件。

4. 通过编辑 `.tina/config.ts` 中的 `schema.collections` 属性来设置你的 Tina 集合。

    例如，你可以向我们的文章添加一个必需的 frontmatter 属性「date posted」：

    ```js title=".tina/config.ts" ins={35-40}
    import { defineConfig } from "tinacms";

    // 你的托管提供商需要作为环境变量暴露出来
    const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

    export default defineConfig({
      branch,
      clientId: null, // 从 tina.io 获取这个值
      token: null, // 从 tina.io 获取这个值
      build: {
        outputFolder: "admin",
        publicFolder: "public",
      },
      media: {
        tina: {
          mediaRoot: "images",
          publicFolder: "public",
        },
      },
      schema: {
        collections: [
          {
            name: "posts",
            label: "Posts",
            path: "src/content/posts",
            format: 'mdx',
            fields: [
              {
                type: "string",
                name: "title",
                label: "Title",
                isTitle: true,
                required: true,
              },
              {
                type: "datetime",
                name: "posted",
                label: "Date Posted",
                required: true,
              },
              {
                type: "rich-text",
                name: "body",
                label: "Body",
                isBody: true,
              },
            ],
          },
        ],
      },
    });
    ```

    在 [Tina 文档](https://tina.io/docs/reference/collections/) 中了解更多关于 Tina 集合的信息。

5. 在生产环境中，Tina CMS 可以直接将更改提交到你的 GitHub 存储库中。要为生产环境设置 Tina CMS，你可以选择使用 [Tina Cloud](https://tina.io/docs/tina-cloud/) 或自托管的 [Tina Data Layer](https://tina.io/docs/self-hosted/overview/)。你可以在 Tina 文档中 [了解更多关于注册 Tina Cloud](https://app.tina.io/register) 的信息。
</Steps>

## 官方资源

-  [Tina CMS Astro 集成指南](https://tina.io/docs/frameworks/astro/)。

## 社区资源

- 由 Jeff See 和 Dylan Awalt-Conley 创建的 [Astro Tina Starter with visual editing](https://github.com/dawaltconley/tina-astro) 
- 由 Tom Bennet 创建的 [Astro Tina Starter with basic editing](https://github.com/tombennet/astro-tina-starter/tree/main) 
- [在 Tina 中使用 Astro 图像优化](https://joschua.io/posts/2023/08/16/how-to-use-astro-assets-with-tina-cms/)

## Themes

<Grid>
  <Card title="Resume01" href="https://astro.build/themes/details/resume01/" thumbnail="resume01.png"/>
  <Card title="Qurno Blog" href="https://astro.build/themes/details/qurno-astro/" thumbnail="qurno.png"/>
</Grid>
